<uieip type="page" value="login" debug="true" timeout="5000"></uieip>
<uieip type="reg" value="console"></uieip>
<!DOCTYPE html>
<html>

<head>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/src/yqwin.min" cache="false"></uieip>
    <title>MdiWin Demo - edit</title>
</head>

<body>
    <h1>DataGrid</h1>
    <form>
        <table style="width: 100%;">
            <tr>
                <td style="width:350px;vertical-align: top;">
                    <div class="easyui-panel" title="editMode" style="width:100%;max-width:370px;padding: 5px;">
                        <div id="div_editMode"></div>
                    </div>
                </td>
                <td style="width:260px;vertical-align: top;">
                    <div class="easyui-panel" title="editType" style="width:100%;max-width:370px;padding: 5px;">
                        <div id="div_editType"></div>
                    </div>
                </td>
                <td style="width:100px;vertical-align: top;">
                    <div class="easyui-panel" title="editModeNo" style="width:100%;max-width:370px;padding: 5px;">
                        <div id="div_editModeNo"></div>
                    </div>
                </td>
                <td style="vertical-align: top;">
                </td>
            </tr>
        </table>
    </form>

    <p>分页</p>
    <table id="dg" style="width:95%;height: 350px;"></table>
    <br />
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset1()">reset</a>
    <p>排序</p>
    <table id="dg2" style="width:95%;height: 250px;"></table>
    <br />
    <a href="#" class="easyui-linkbutton" data-options="" onclick="javascript:reset2()">reset</a>
    <script>
        var dbname = "yqbase";

        $(function () {
            $("#div_editMode").radiogroup({
                name: 'radio1',
                labelWidth: 340,
                data: [{
                    value: '1',
                    label: '自由编辑1（包含save按钮）,在当前行中编辑',
                }, {
                    value: '2',
                    label: '自由编辑2（包含save按钮），弹出编辑模态窗体'
                }, {
                    value: '3',
                    label: '编辑（不包含save按钮），弹出编辑模态窗体'
                }, {
                    value: '4',
                    label: '独立页面编辑，弹出编辑模态窗体'
                }],
                value: 4,
                dir: 'v'
            });

            $("#div_editType").radiogroup({
                name: 'radio2',
                labelWidth: 270,
                data: [{
                    value: '1',
                    label: '属性编辑模式 editMode=2,3使用',
                }, {
                    value: '2',
                    label: 'form编辑模式 editMode=2,3使用'
                }],
                value: 1,
                dir: 'v'
            });

            $("#div_editModeNo").radiogroup({
                name: 'radio3',
                labelWidth: 70,
                data: [{
                    value: '1',
                    label: '=1',
                }, {
                    value: '2',
                    label: '=2'
                }, {
                    value: '3',
                    label: '=3'
                }],
                value: 1,
                dir: 'v'
            });

            $.yqDbList({ ajaxUrl: "_db.html" },
                function (data) {
                    if (data.error == 0) {
                        dbname = data.rows[0].name;
                        dg();
                    } else {
                        alert(data.info);
                    }
                });
        });

        function dg() {
            $("#dg").yqDataGrid({
                ajaxUrl: "/_db.html",
                dbname: dbname,   //数据库
                tbname: "ab_test_m",       //表
                keyId: "sid",       //关键字段
                bindingKeyId: null,
                bindingValue: null,
                pKeyId: null,
                pKeyValue: null,

                addWhere: "",                   //额外条件
                order: "textbox",               //排序

                frozenNum: 2,
                editMode: 4,
                editType: 1,
                editModeW: 750, //模态编辑器宽度 格式为 800（数字）
                editModeH: 650, //模态编辑器高度 格式为 600（数字）
                editModeNo: 1, //编辑模板
                loadData: true,
                isPage: true,

                isEdit: true, //可编辑
                copy: true,
                add: true,
                upp: true,
                del: true,
                isdel: false, //可注销
                isdelEdit: false, //注销是否可编辑
                move: false, //可移动

                toexcel: true, //Excel导出
                excelName: "excel导出",   //Excel导出文件名
                inexcel: false, //Excel导入

                beforeBindingTitle: function (titles, callback) {
                    callback(titles);
                }, //标题绑定前
                afterBindingTitle: function () {
                    dg2();
                }, //标题绑定后
                onBeforeShowEdit: function (titles, action, row, callback) {      //add/upp/move 编辑执行前
                    console.log(titles);
                    callback(true, titles, row);      //true 执行编辑
                },
                afterSetdata: function (data) {
                    this.yqDataGrid("mergeCells", {
                        index: 0,
                        field: "textbox",
                        rowspan: 2,
                        colspan: 1
                    });

                    this.yqDataGrid("mergeCells", {
                        index: 4,
                        field: "textbox",
                        rowspan: 2,
                        colspan: 3
                    });
                },
                beforeToExcel: function (title, rows, mergeCells, callback) { //Excel导出前数据处理
                    mergeCells = [{
                        index: 0,
                        field: "textbox",
                        rowspan: 2,
                        colspan: 1
                    }, {
                        index: 4,
                        field: "textbox",
                        rowspan: 2,
                        colspan: 3
                    }];
                    callback(title, rows, mergeCells);
                },
            });
        }

        function reset1() {
            $("#dg").yqDataGrid({
                editMode: $("#div_editMode").radiogroup("getValue"),
                editType: $("#div_editType").radiogroup("getValue"),
                editModeNo: $("#div_editModeNo").radiogroup("getValue")
            });
        }

        function dg2() {
            $("#dg2").yqDataGrid({
                ajaxUrl: "/_db.html",
                dbname: dbname,   //数据库
                tbname: "ab_test_move",       //表
                keyId: "sid",       //关键字段
                bindingKeyId: null,
                bindingValue: null,
                pKeyId: null,
                pKeyValue: null,

                addWhere: "",                   //额外条件
                order: "queue",                     //排序

                //frozenNum: 2,
                editMode: 2,   //1-自由编辑1（包含save按钮）,在当前行中编辑；2-自由编辑2（包含save按钮），弹出编辑模态窗体
                editModeW: 650, //模态编辑器宽度 格式为 800（数字）
                editModeH: 470, //模态编辑器高度 格式为 600（数字）
                editModeNo: 1, //编辑模板
                loadData: true,
                isPage: false,

                isEdit: true, //可编辑
                copy: true,
                add: true,
                upp: true,
                del: true,
                isdel: false, //可注销
                isdelEdit: false, //注销是否可编辑
                move: true, //可移动

                toexcel: true, //Excel导出
                excelName: "excel导出2",   //Excel导出文件名
                inexcel: false, //Excel导入

                beforeBindingTitle: function (columns, callback) {
                    console.log("beforeBindingTitle", columns);
                    callback(columns);
                }, //标题绑定前
                afterBindingTitle: function () {
                    console.log("afterBindingTitle");
                }, //标题绑定后
            });
        }

        function reset2() {
            $("#dg2").yqDataGrid({
                editMode: $("#div_editMode").radiogroup("getValue"),
                editType: $("#div_editType").radiogroup("getValue"),
                editModeNo: $("#div_editModeNo").radiogroup("getValue")
            });
        }
    </script>
</body>

</html>